import React, { useState, useEffect } from 'react'
import { Form, Input, Radio, Button, Modal, Upload, message } from 'antd';
import { SearchOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { addTypes } from '../../services/type'
import { setPagination, isModalVisible, setIsModalVisible } from '../../store/slices/typeSlice';
import { useSelector, useDispatch } from "react-redux";


export default function Add({ show }) {
    // useForm
    const [form] = Form.useForm();
    // 弹出框是否隐藏
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
        console.log(isModalVisible);
    };


    // 确定事件
    const handleOk = async () => {
        // 获得表单中所有输入的值
        let values = form.getFieldsValue();
        console.log(values);
        // 判断输入的值是否满足格式
        if (!values.typeName) {
            Modal.info({
                title: '提示',
                content: (
                    <div>
                        <p>您的信息还未填完整！</p>
                    </div>
                ),
                onOk() { },
            });
        }
        else {
            console.log("111");
            addTypes({ ...values, isShow: true });
            setIsModalVisible(false);
            show();
            // 清除表单内容
            form.resetFields();

        }


    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };


    return (

        <div style={{ display: 'inline-block', marginRight: "30px" }} >
            <Button type="primary" onClick={showModal}>增加</Button>
            <Modal title="增加类型" visible={isModalVisible}
                onOk={handleOk} onCancel={handleCancel}
                okText="确认"
                cancelText="取消">
                <Form style={{ textAlign: "left", }} form={form}
                    name="add"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 10,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                >

                    <Form.Item
                        extra="please input typeName."
                        name="typeName"
                        label="类型"
                        rules={[
                            {
                                required: true,
                                message: '类型名不能为空!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

